<template>
  <div :class="['introduce', $ua.isFromPc() ? 'z-web' : 'z-phone']">
    <div class="left-img">
      <div :style="{'background-image': 'url(' + artData?.photo + ')'}" alt="" />
    </div>
    <div v-if="$ua.isFromPc()" class="right-info">
      <div class="right-title">
        <el-image
          :src="artData?.photo"
          class="personal-img"
          fit="cover"
        >
          <div slot="error" class="image-slot">
            <img src="@/static/img/user/headImg.jpg" alt="">
          </div>
        </el-image>
        <span class="name">
          {{ artData?.name }}
        </span>
        <span class="share" @click="handleShare(artData.share_times)">
          <img src="@/static/img/share.png" alt="">
          <div class="text">
            分享
          </div>
        </span>
      </div>
      <div class="right-second-title">
        {{ artData?.position }}
      </div>
      <div class="desc">
        <p>作品<span>{{ artData?.works_total }}</span></p>
        <p>粉丝<span>{{ artData?.focus_total }}</span></p>
      </div>
      <div v-if="userInfo?.user_info?.art_info.data_id == id" class="edit">
        <div class="upload-work" @click="goUploadWork">
          上传作品
        </div>
        <div class="edit-personal" @click="goEditPersonal">
          编辑个人主页
        </div>
      </div>
      <div v-else class="follow" @click="follow(artData?.data_id, artData?.is_focus)">
        <img v-if="artData?.is_focus" src="@/static/img/follow_active.png" alt="">
        <img v-else src="@/static/img/follow.png" alt="">
        关注
      </div>
      <div class="introduce">
        {{ artData?.introduction }}
      </div>
    </div>
    <div v-else class="user-info">
      <div class="name">
        {{ artData?.name }}
      </div>
      <div class="position">
        {{ artData?.position }}
      </div>
      <div class="desc">
        <p>作品<span>{{ artData?.works_total }}</span></p>
        <p>粉丝<span>{{ artData?.focus_total }}</span></p>
      </div>
      <div class="line" v-if="!$ua.isFromPc()" />
    </div>
  </div>
</template>

<script>
import { getImgUrl } from '@/utils/downloadFile'
import { data } from 'dom7'
export default {
  props: ['userInfo', 'artData'],
  data() {
    return{
      followActive: false,
      id: ''
    }
  },
  computed: {
    // username() {
    //   return this.$store.state.user.info.user_info.name
    // }
  },
  mounted() {
    this.id = this.$route.query.id
  },
  methods: {
    getImgUrl,
    follow(art_id, is_focus) {
      if (this.$store.state.user.token) {
        if (!is_focus) {
          this.$api.artFocus({ art_id: art_id }, {}).then(res => {
            if (res.status == "$SUCCESS") {
              this.$message.success('关注成功')
              this.$emit('getArtData')
            }
          })
        } else {
          this.$message.warning('您已关注该艺术家')
        }
      } else {
        this.$message.warning('请您先登陆')
        this.$store.commit("user/SET_LOGIN", true);
      }
    },
    goUploadWork(data) {
      this.$router.push({ path: '/editPersonalHome/uploadWorks' })
    },
    goEditPersonal() {
      this.$router.push('/editPersonalHome')
    },
    updateArtWorks(params) {
      this.$api.updateArtWorks({}, params).then(res => {
        if (res.status == '$SUCCESS') {
          this.$message.success('复制链接成功')
              //创建input标签
          const input = document.createElement('input')
          //将input的值设置为需要复制的内容
          input.value = window.location.href
          //添加input标签
          document.body.appendChild(input)
          //选中input标签
          input.select()
          //执行复制
          document.execCommand('copy')
          //成功提示信息
          this.$message.success('复制链接成功!')
          //移除input标签
          document.body.removeChild(input)
        }
      })
    },
    // 分享功能（就是复制导航栏内容）
    handleShare(share_times) {
      if (this.$store.state.user.token) {
        const params = {
          share_times: ++share_times,
          data_id: this.$route.query.id
        }
        this.updateArtWorks(params)
      } else {
        this.$message.error('请先登陆')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.introduce {
  &.z-web {
    padding: 150px 276px 200px;
    background: #fff;
    display: inline-flex;
    width: 100%;

    .left-img {
      display: inline-block;
      div {
        width: 792px;
        height: 574px;
        background-repeat: no-repeat;
        background-size: contain;
      }
    }

    .right-info {
      display: inline-block;
      vertical-align: top;
      margin-left: 109px;
      color: #333;
      margin-top: 50px;
      position: relative;

      .right-title {
        margin-bottom: 20px;

        .personal-img {
          cursor: pointer;
        }

        img {
          width: 50px;
          vertical-align: top;
        }

        ::v-deep(.el-image) {
          cursor: pointer;
          width: 50px;
          margin-right: 10px;
          border-radius: 50%;
        }

        .name {
          font-size: 44px;
          font-weight: 600;
          line-height: 42px;
        }

        .share {
          float: right;
          font-size: 12px;
          cursor: pointer;
        }
      }

      .right-second-title {
        font-size: 18px;
        // line-height: 17px;
        margin-bottom: 65px;
      }

      .desc,
      p {
        display: inline-block;
        font-size: 16px;
        margin-right: 32px;
        line-height: 19px;

        &:last-child {
          margin-right: 0;
        }
        span {
          font-size: 24px;
          // font-family: '宋体';
          display: inline-block;
          margin-left: 6px;
          vertical-align: text-bottom;
        }
      }

      .edit {
        .upload-work,
        .edit-personal {
          width: 180px;
          height: 40px;
          display: inline-block;
          text-align: center;
          line-height: 40px;
          color: #333;
          font-size: 16px;
          margin-top: 42px;
          cursor: pointer;
        }

        .upload-work {
          background: #E0CBB4;
          margin-right: 24px;
        }

        .edit-personal {
          border: 1px solid #E8E8E8;
        }
      }

      .follow {
        width: 100%;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        border: 1px solid #e8e8e8;
        margin-top: 30px;
        cursor: pointer;

        img {
          width: 30px;
        }
      }

      .introduce {
        width: 652px;
        height: 263px;
        font-size: 18px;
        font-weight: 600;
        color: #333;
        position: absolute;
        padding: 50px;
        left: -86px;
        // top: 409px;
        background: #fff;
        // overflow:hidden;
        // text-overflow: ellipsis;
        // -webkit-line-clamp: 3;
        // display: -webkit-box;
        // -webkit-box-orient: vertical;
      }
    }
  }

  &.z-phone {
    .left-img {
      width: pxtorem(300);
      height: pxtorem(300);
      margin:0 auto pxtorem(33);

      div {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 50%;
      }
    }

    .user-info {
      font-weight: 600;
      color: #333;
      text-align: center;

      .name {
        font-size: pxtorem(44);
      }

      .position {
        font-size: pxtorem(22);
        margin: pxtorem(15) 0 pxtorem(23);
        // text-align: center;
      }

      .desc {
        p {
          display: inline-block;
          font-size: pxtorem(22);
          font-weight: 600;
          color: #333;
          margin-right: pxtorem(32);

          span {
            display: inline-block;
            margin-left: 11;
            font-size: pxtorem(30);
          }
        }
      }

      .line {
        width: pxtorem(700);
        height: 1px;
        margin: 0 auto;
        background: #E8E8E8;
        margin-top: pxtorem(60);
      }
    }
  }
}
</style>